<template>
  <div ref="chart" style="width: 1100px;height:400px;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const chart = ref(null);
let myChart = null;

onMounted(() => {
  myChart = echarts.init(chart.value);
  const option = {
    title: {
      text: '事故发生数与预警数',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['发生量', '预警量'],
    },
    xAxis: {
      data: [
        '8.21',
        '8.22',
        '8.23',
        '8.24',
        '8.25',
        '8.26',
        '8.27',
        '8.28',
        '8.29',
        '8.30',
        '8.31',
        '9.1',
        '9.2',
        '9.3',
      ],
    },
    yAxis: {},
    series: [
      {
        name: '发生量',
        type: 'line',
        data: [1, 3, 0, 3, 0, 0, 0, 1, 6, 2, 3, 0, 0, 1],
        lineStyle: {
          color: '#ff4500', // 红色
        },
      },
      {
        name: '预警量',
        type: 'line',
        data: [10, 15, 25, 15, 20, 30, 21, 21, 17, 19, 31, 21, 13, 16],
        lineStyle: {
          color: '#008000', // 绿色
        },
      },
    ],
  };
  myChart.setOption(option);
});

onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style scoped>
</style>
